<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('进度计划')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
    <th:block th:include="include :: datetimepicker-css"/>
</head>
<style>
    .bootstrap-tree-table .treetable-tbody td {
        white-space: normal !important;
    }

    .bootstrap-tree-table .treetable-bars .tool-right {
        float: left !important;
        left: 10px;
    }

    .table-striped .table > thead:first-child > tr:first-child > th {
        font-weight: normal;
        font-size: 13px;
        border: 1px solid #cccccc !important;
    }

    .bootstrap-tree-table .treetable-tbody td {
        border: 1px solid #cccccc !important;
        border-top: 0px solid #cccccc !important;
    }

    .select-list li p {
        width: 18px !important;
    }

    .select-list li {
        color: #333;
        margin: 5px 13px 5px 0px;
    }

    .select-list li input {
        width: 160px
    }
    .pull-right{
        display: none !important;
    }

</style>
<body class="gray-bg">

<div class="ui-layout-west">
    <div class="box box-main">
        <div class="box-header">
            <div class="box-title">
                <i class="fa icon-grid"></i> 项目名称
            </div>
            <div class="box-tools pull-right">
                <a type="button" class="btn btn-box-tool" href="#" onclick="project()" title="管理项目"><i
                        class="fa fa-edit"></i></a>
                <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i
                        class="fa fa-chevron-up"></i></button>
                <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i
                        class="fa fa-chevron-down"></i></button>
                <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新项目"><i
                        class="fa fa-refresh"></i></button>
            </div>
        </div>
        <div class="ui-layout-content">
            <div id="tree" class="ztree"></div>
        </div>
    </div>
</div>

<div class="ui-layout-center">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="region-form">
                    <input type="hidden" id="companyId" name="companyId">
                    <input type="hidden" id="companyName" name="companyName">
                    <input type="hidden" id="proId" name="proId">
                    <input type="hidden" id="programId" name="programId">
                    <input type="hidden" id="programName" name="programName">
                    <div class="select-list">
                        <ul>
                            <li>
                                <p style="width: 90px !important;">项目名称：</p>
                                <input type="text" class="form-control" name="programName" id="progName"
                                       autocomplete='off'/>
                            </li>

                            <li id="build">
                                <p style="width: 90px !important;">楼栋号：</p>
                                <select id="buildingNumber" name="buildingNumber" class="form-control">
                                </select>
                            </li>

                            <li>
                                <p style="width: 90px !important;">批次：</p>
                                <select id="batch" name="batch" class="form-control noselect2">
                                    <option value="">请选择</option>
                                    <option value="0">第一批次</option>
                                    <option value="1">第二批次</option>
                                    <option value="2">第三批次</option>
                                </select>
                            </li>

                            <li>
                                <p style="width: 90px !important;">节点名称：</p>
                                <select id="node" name="node" class="form-control">
                                    <option value="">请选择</option>
                                    <option th:each="node : ${node}" th:text="${node.dictValue}"
                                            th:value="${node.dictCode}"></option>
                                </select>
                            </li>

                            <li style="margin-left: 20px">
                                <a class="btn btn-primary btn-rounded btn-sm" id="Search" onclick="$.table.search('region-form', 'bootstrap-table')"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('region-form', 'bootstrap-table')"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="col-sm-12 search-collapse">
                <h4 class="form-header h2">项目概况</h4>

                <a class="btn btn-info btn-primary" id="upload" onclick="upload()">
                    <i class="fa fa-upload"></i> 上传概况
                </a>

                <a class="btn btn-warning btn-primary" id="check" onclick="check()">
                    <i class="fa fa-search"></i> 查看概况
                </a>

                <div style="display: inline" id="finish">
                    <p style="display: inline" id="_p">节点完成率：</p>

                    <p style="display: inline" id="effect">生效状态：
                    </p>
                </div>

            </div>


            <div class="btn-group-sm" id="toolbar" role="group">
                <h4 class="form-header h2">项目动态</h4>

                <a class="btn btn-success" id="add"
                   onclick="addView($('#companyId').val(),$('#proId').val())">
                    <i class="fa fa-plus"></i> 新增
                </a>

                <a class="btn btn-primary single disabled" onclick="edit();">
                    <i class="fa fa-edit"></i> 修改
                </a>

                <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()">
                    <i class="fa fa-remove"></i> 删除
                </a>

                <a class="btn btn-warning" onclick="$.table.exportExcel()">
                    <i class="fa fa-download"></i> 导出
                </a>
            </div>

            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table" style="table-layout: fixed;word-break:break-all;"></table>
            </div>
        </div>
    </div>

    <div class="container-div" id="static">
        <div class="row">

            <div class="col-sm-12 select-table table-striped">

                <div class="btn-group-sm" id="toolbar2" role="group">
                    <h4 class="form-header h2">项目统计</h4>
                    <a class="btn btn-warning" onclick="exportStatisticExcel()">
                        <i class="fa fa-download"></i> 导出
                    </a>
                </div>

                <div class="col-sm-12 select-table table-striped">
                    <table id="bootstrap-table2" style="table-layout: fixed;word-break:break-all;"></table>
                </div>
            </div>
        </div>
    </div>
</div>


<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: bootstrap-suggest-js"/>
<th:block th:include="include :: bootstrap-typeahead-js"/>

<script th:inline="javascript">

    /* 模块前缀url */
    var prefix = ctx + "progressplan";

    /* 初始化方法 */
    $(function () {
        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
        $('body').layout({initClosed: panehHidden, west__size: 300});

        // 隐藏添加按钮
        $('#add').hide();
        $('#upload').hide();
        $('#check').hide();
        $('#build').hide();
        $('#static').hide();


        // 初始化查询参数
        var programName = [[${programName}]];
        if(null != programName && '' != programName){
            $("#progName").val(programName)
        }

        var batch = [[${batch}]];
        if(null != batch && '' != batch){
            $("#batch option[value="+ batch +"]").attr("selected",true);
        }

        var nodeId = [[${nodeId}]];
        if(null != nodeId && '' != nodeId){
            $("#node option[value="+ nodeId +"]").attr("selected",true);
        }

        var programId = [[${programId}]];
        if(null != programId && '' != programId){
            $("#proId").val(programId);
            $("#programId").val(programId);
        }

        var buildingNumber = [[${buildingNumber}]];
        if(null != buildingNumber && '' != buildingNumber){
            $("#buildingNumber option[value="+ buildingNumber +"]").attr("selected",true);
        }

        // 初始化列表1
        queryList();

        // 初始化树组件
        queryProjectTree();

    });

    /* 初始化 列表信息 */
    function queryList() {
        var options = {
            uniqueId: "progressId",
            url: prefix + "/list",
            exportUrl: prefix + "/export",
            removeUrl: prefix + "/remove",
            pagination: true,
            modalName: "进度计划报表",
            columns: [
                {
                    checkbox: true,
                    valign: "middle",
                    align: 'center',
                    width: '20',
                },
                {
                    field: 'companyName',
                    align: 'center',
                    title: '工程公司',
                    width: '80',
                },
                {
                    field: 'programName',
                    align: 'center',
                    title: '项目名称',
                    width: '70',
                },
                {
                    field: 'buildingNumber',
                    align: 'center',
                    title: '楼栋号',
                    width: '60',
                },
                {
                    field: 'floorNumber',
                    align: 'center',
                    title: '总楼层',
                    width: '60',
                },
                {
                    field: 'batch',
                    align: 'center',
                    title: '批次',
                    width: '70',
                },
                {
                    field: 'node',
                    align: 'center',
                    title: '节点</br>名称',
                    width: '60',
                },
                {
                    field: 'planStartTime',
                    align: 'center',
                    title: '计划</br>开始时间',
                    sortable: true,
                    width: '85',
                },
                {
                    field: 'planEndTime',
                    align: 'center',
                    title: '计划</br>完成时间',
                    sortable: true,
                    width: '85',
                },
                {
                    field: 'actualStartTime',
                    align: 'center',
                    title: '实际</br>开始时间',
                    width: '85',
                },
                {
                    field: 'actualEndTime',
                    align: 'center',
                    title: '实际</br>完成时间',
                    width: '85',
                },
                {
                    field: 'planNeedTime',
                    align: 'center',
                    title: '计划</br>用时',
                    formatter: function (value, row, index) {
                        if (value != '' && value != null) {
                            return value + '天';
                        }
                    }
                },
                {
                    field: 'actualNeedTime',
                    align: 'center',
                    title: '实际</br>用时',
                    formatter: function (value, row, index) {
                        if (value != '' && value != null) {
                            return value + '天';
                        }
                    }
                },
                {
                    field: 'status',
                    align: 'center',
                    title: '状态',
                    width: '50',
                },
                {
                    field: 'msgInfo',
                    align: 'center',
                    title: '',
                    width: '0',
                    hidden:true,
                    formatter: function (value, row, index) {
                        if(null != value && '' != value){
                            // 每次循环完,清除前一次 默认取最后一行数据
                            $("#finishRate").remove();
                            var html = value+ "%";
                            $("#_p").append('<input type="text" id="finishRate" style="border:0px;outline:none;" value="' + html + '">');
                        }
                        return '';

                    }
                },
                {
                    field: 'isEffectFlag',
                    align: 'center',
                    // title: '是否</br>生效',
                    title: '',
                    width: '1',
                    hidden:true,
                    formatter: function (value, row, index) {
                        if(value == '1'){
                            // 未启用
                            $("#effectDiv").remove();
                            $("#effect").append('<i id="effectDiv" class="fa fa-toggle-off text-info fa-2x" onclick="enable()"></i>');
                        }else{
                            // 启用
                            $("#effectDiv").remove();
                            $("#effect").append('<i id="effectDiv" class="fa fa-toggle-on text-info fa-2x" onclick="disable()"></i>');

                        }
                        if($("#proId").val() == '' || $("#proId").val() == null){
                            $('#effectDiv').hide();
                        }
                    }
                },
                {
                    field: 'progressDetail',
                    align: 'center',
                    title: '进度</br>情况',
                    formatter: function (value, row, index) {
                        if(row.threshold == 'blue'){
                            return '<div style="background-color: blue;color:white">'+value+'</div>';
                        }
                        if(row.threshold == 'yellow'){
                            return '<div style="background-color: yellow">'+value+'</div>';
                        }
                        if(row.threshold == 'red'){
                            return '<div style="background-color: red;color:white">'+value+'</div>';
                        }
                        if(row.threshold == null){
                            return '<div>'+value+'</div>';
                        }
                    }
                },
                {
                    field: 'remark',
                    align: 'center',
                    title: '详情',
                    width: '50',
                    formatter: function (value, row, index) {
                        return '<a href="javascript:void(0)" onclick="detailRemark(\'' + row.progressId + '\')">详情</a>';
                    }
                },
                {
                    field: 'virtualPath',
                    align: 'center',
                    title: '影像',
                    formatter: function(value, row, index) {
                        if(row.virtualPath != null){
                            return $.table.imageView(row.virtualPath);
                        }
                    }
                },
                {
                    field: 'note',
                    align: 'center',
                    title: '备注',
                    formatter: function(value, row, index) {
                        return $.table.tooltip(value, 3, "open");
                    }
                },
                {
                    field: 'updateTime',
                    align: 'center',
                    title: '更新时间',
                    sortable: true,
                    width: '85',
                },
                {
                    field: 'creater',
                    align: 'center',
                    title: '操作人员',
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        if(row.isEffectFlag =='1' ){
                            return '-';
                        }else{
                            var actions = [];
                            actions.push('<a class="btn btn-info btn-xs" href="javascript:void(0)" onclick="detail(\'' + row.progressId + '\',\'' + row.planEndTime + '\')"><i class="fa fa-list-ul"></i>动态</a>');
                            return actions.join('');
                        }
q                    }
                }
            ]
        };
        $.table.init(options);
    }

    /* 字典列表-详细*/
    function detailRemark(progressId) {
        var url = prefix + '/detailRemark/' + progressId;
        $.modal.open("进度情况描述", url);
    }

    /* 初始化 树组件 */
    function queryProjectTree() {
        var fix = ctx + "danManage";
        var url = fix + "/treeData";
        var options = {
            url: url,
            expandLevel: 0,
            onClick: zOnClick
        };
        $.tree.init(options);

        function zOnClick(event, treeId, treeNode) {
            if (treeNode.grade == 1) {
                $("#companyId").val(treeNode.id);
                $("#proId").val("");
                $('#add').hide();
                $('#upload').hide();
                $('#build').hide();
                $('#check').hide();

                $("#programId").val("");
                $("#programName").val("");
                $.table.search('region-form', 'bootstrap-table')
            } else if (treeNode.grade == 2) {
                $("#companyId").val(treeNode.pId);
                $("#proId").val(treeNode.id);
                $("#programId").val(treeNode.id);
                $("#programName").val(treeNode.name);
                $('#add').show();
                $('#upload').show();
                $('#build').show();
                $('#check').show();
                $('#effectDiv').show();
                $('#static').show();
                // 查询项目楼栋号
                selectBuildingNumber(treeNode.pId, treeNode.id);

                // 初始化表格1（项目动态）
                $.table.search('region-form', 'bootstrap-table');
                // 初始化表格2（项目统计）
                intiTable2();
            }
        }
    }

    function intiTable2(){
        var options1 = {
            id: "bootstrap-table2",
            toolbar: "toolbar2",
            // 玄学问题，不传参数后台也能接收参数
            url: prefix + "/statisticList",
            exportUrl: prefix + "/exportStatistic",
            modalName: "项目统计",
            columns: [
                {
                    field : 'planMonth',
                    title : '月份'
                },
                {
                    field : 'planFinishRate',
                    title : '计划完成率'
                },
                {
                    field : 'actualTempFinishRate',
                    title : '实际完成率'
                },
                {
                    field : 'planOffset',
                    title : '偏差'
                }]
        };
        $.table.init(options1);
        setTimeout(function () {
            $('#bootstrap-table2').bootstrapTable('refresh');
        }, 200)

    }

    /* 查询楼栋号 */
    function selectBuildingNumber(companyId, proId) {
        $(".opt").remove();
        $.ajax({
            url: prefix + '/selectBuildingNumber?companyId=' + companyId + '&programId=' + proId,
            success: function (data) {
                $("#buildingNumber").append('<option value="" class="opt">请选择</option>');
                for (var i in data) {
                    html = data[i].name;
                    value = data[i].id;
                    $("#buildingNumber").append('<option value="' + html + '" class="opt">' + html + '</option>')
                }
            }
        })
    }

    /* 添加按钮 */
    function addView(companyId, proId) {
        var url = "/progressplan/addView?companyId=" + companyId + "&proId=" + proId;
        $.modal.open("添加" + table.options.modalName, url, 600, 680);
    }

    /* 编辑按钮 */
    function edit() {
        var progressId = $('#bootstrap-table').bootstrapTable('getSelections')[0].progressId;
        var companyId = $('#bootstrap-table').bootstrapTable('getSelections')[0].companyId;
        var programId = $('#bootstrap-table').bootstrapTable('getSelections')[0].programId;
        var url = prefix + '/editView?progressId=' + progressId + '&companyId=' + companyId + '&programId=' + programId;
        $.modal.open("报表编辑", url, 600, 600);
    }

    /* 初始化树组件 > 展开 */
    $('#btnExpand').click(function () {
        $._tree.expandAll(true);
        $(this).hide();
        $('#btnCollapse').show();
    });

    /* 初始化树组件 > 折叠 */
    $('#btnCollapse').click(function () {
        $._tree.expandAll(false);
        $(this).hide();
        $('#btnExpand').show();
    });

    /* 初始化树组件 > 刷新 */
    $('#btnRefresh').click(function () {
        queryProjectTree();
    });

    /*动态详情-详细*/
    function detail(progressId, planEndTime) {
        var url = prefix + '/detail?progressId=' + progressId + '&planEndTime=' + planEndTime;
        // 获取页面查询参数
        var param = getParam();
        $.modal.open("动态详情", url + param);

    }

    /* 获取页面查询参数*/
    function getParam(){
        var param = "";
        var programName = $("#progName").val();
        var batch = $("#batch").val();
        var node = $("#node").val();
        var programId = $("#proId").val();
        var buildingNumber = $("#buildingNumber").val();

        if(programName != null && programName != ''){
            param = param.concat("&programName=" + programName);
        }
        if(batch != null && batch != ''){
            param = param.concat("&batch=" + batch);
        }
        if(node != null && node != ''){
            param = param.concat("&node=" + node);
        }
        if(programId != null && programId != ''){
            param = param.concat("&programId=" + programId);
        }
        if(buildingNumber != null && buildingNumber != ''){
            param = param.concat("&buildingNumber=" + buildingNumber);
        }
        return param;
    }

    /* 上传按钮 */
    function upload() {
        var programId = $("#programId").val();
        var url = prefix + '/uploadView?programId=' + programId;
        $.modal.open("项目概况上传", url);
    }

    /* 查看按钮 */
    function check() {
        var programId = $("#programId").val();
        var url = prefix + '/checkView?programId=' + programId;
        $.modal.open("项目概况", url);
    }

    /* 项目动态-启动 */
    function enable() {
        var programId = $("#programId").val();
        $.modal.confirm("确认要启用项目动态吗？", function() {
            $.operate.post(prefix + "/changeStatus", { "programId": programId,"isEffect": '0'});
            $('#bootstrap-table').bootstrapTable('refresh');
        })
    }

    /* 项目动态-停用 */
    function disable() {
        var programId = $("#programId").val();
        $.modal.confirm("确认要停用项目动态吗？", function() {
            $.operate.post(prefix + "/changeStatus", { "programId": programId,"isEffect": '1'});
            $('#bootstrap-table').bootstrapTable('refresh');
        })
    }

    /* 子页面调用父页面方法 */
    function refresh(){
        $('#bootstrap-table').bootstrapTable('refresh');
        setTimeout(function () {
            $('#bootstrap-table2').bootstrapTable('refresh');
        },200)
    }

    /* 导出按钮 */
    function exportStatisticExcel() {
        var data = {
            programId: $("#programId").val(),
        }

        $.modal.confirm("确定导出所有" + table.options.modalName + "吗？", function () {
            $.modal.loading("正在导出数据，请稍后...");
            $.post(prefix + "/exportStatistic", data, function (result) {
                console.log(encodeURI(result.msg));

                if (result.code == web_status.SUCCESS) {
                    window.location.href = ctx + "common/download?fileName=" + encodeURI(result.msg) + "&delete=" + true;

                } else if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                } else {
                    $.modal.alertError(result.msg);
                }
                $.modal.closeLoading();
            });
        });
    }

</script>
</body>
</html>